// 导航栏效果
(function(){
    document.addEventListener('scroll', function(e){
    if(document.documentElement.clientWidth<800){
      return                                        // 取消移动端导航栏下拉变色效果
    }
    let scrollTop = document.documentElement.scrollTop;
    let navBar = document.querySelector('nav');
    if(scrollTop>100){
      navBar.classList.add('navscrollstyle');
    }else{
      navBar.classList.remove('navscrollstyle');
    }
  })
})();

// 导航定位效果
(function(){
  let navItemList = document.querySelector('nav').querySelectorAll('li');
  let sectionList = document.querySelectorAll('section');
  let winHeight = 0;
  for (let i = 0; i < navItemList.length; i++) {
    navItemList[i].index = i + 1;
    navItemList[i].addEventListener('click', function(){
      for (let j = 0; j < this.index; j++) {
        winHeight += sectionList[j].offsetHeight;
      }
      document.documentElement.scrollTop = winHeight-70; // 扣除导航栏高度遮挡
      winHeight = 0;
    })
  }
})();

// 背景轮播
(function(){
  let bg = document.querySelector('.banner');
  let k = 1;
  setInterval(() => {
    if(k > 4){
      k = 1;
    }
    bg.style.backgroundImage = `url(../../img/bg-0${k}.jpg)`;
    k++;
  }, 4000)
})();

// 字体加载
(function(){
  let myName = document.getElementById('myname');
  let myWork = document.getElementById('mywork');
  let textArr = ['shenyukun', 'A Naive Web Developer.']
  let nI = 0, wI = 0;
  let timer = setInterval(() => {
    if (nI<=textArr[0].length) {
      myName.innerHTML = textArr[0].slice(0, nI);
      nI++;
    } else {
      if (wI>textArr[1].length) {
        wI = 0;
        nI = 0;
        myWork.innerHTML = '';
        myName.innerHTML = '';
        return
      }
      myWork.innerHTML = textArr[1].slice(0, wI);
      wI++;
    }
  },500)
})();

// 图片预览弹窗
(function(){
  let picList = document.querySelectorAll('.img-thumbnail');
  let picWin = document.querySelector('.img-window');
  let img = picWin.querySelector('img');
  picWin.onclick = function(){
    this.style.display = 'none';
    document.documentElement.style.overflowY = 'scroll'
  }
  for (let i = 0; i < picList.length; i++) {
    picList[i].index = i;
    picList[i].onclick = function(){
      img.src = this.src;
      picWin.style.display = 'block';
      document.documentElement.style.overflowY = 'hidden'; 
    }
  }
})();

// 表单提交ajax
(function(){
  let submitBtn = document.getElementById('submitBtn');
  let form = document.forms[0]; 
  let xhr = new XMLHttpRequest();
  let dataJson = {};
  let pattren = /^[0-9A-Za-z-_]+@[0-9A-Za-z-_]+(\.[A-Za-z-_]+)$/
  submitBtn.addEventListener('click', () => {
    for (let i = 0;i < form.elements.length-1; i++) {
      dataJson[form.elements[i].name] = form.elements[i].value;
    }
    // 表单验证
    for(key in dataJson){
      if (!dataJson[key] || !pattren.test(dataJson.email)) {
        alert('请填写正确信息')
        return
      }
    }
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4) {
          if (xhr.status>=200 && xhr.status<300) {
              for (let j = 0;j < form.elements.length-1; j++) {
                form.elements[j].value = '';
              }
              alert('提交成功');
          } else {
              console.log(xhr.status);
          }
      }
    }
    xhr.open('POST', '/message');
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify(dataJson));
    });
})();


// (function(){
  // document.addEventListener('wheel', wheelScroll);
  // function wheelScroll(e){
  //   document.removeEventListener('wheel', wheelScroll);
  //   if (navigator.userAgent.includes('Firefox')) {
  //     e.wheelDelta = -e.wheelDelta
  //   }

  //   if(e.wheelDelta<0){
  //     setTimeout(function(){
  //       window.scrollTo(0, document.documentElement.scrollTop+500);
  //       document.addEventListener('wheel', wheelScroll);
  //     },100) 
  //   }else{
  //     setTimeout(function(){
  //       window.scrollTo(0, document.documentElement.scrollTop-500);
  //       document.addEventListener('wheel', wheelScroll);
  //     },100) 
  //   }
  // }
// })()